<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百家云-用户注册</title>
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/register.css">
    
<body>
	<jsp:include page="head.jsp"/>
	
    <div class="reg">
        <div class="reg_form">
            <div class="reg_info">
                <div class="tab">注册用户</div>
                <a href="login.jsp">已有账号，立即登录</a>
            </div>
            <div class="f_tbody">
                <form action="${pageContext.request.contextPath }/UserServlet?method=register" method="post">
                    <div class="une">
                        <label for="une"><i class="star">* </i>用户名：</label>
                        <input type="text" name="username" id="username" placeholder="请输入6~16位的用户名"  required minlength="6" maxlength="16">
                    </div>
                   
                    <div class="pwd">
                        <label for="pwd"><i class="star">* </i>密&nbsp&nbsp&nbsp码：</label>
                        <input type="password" name="pwd" id="pwd" placeholder="请输入6~10位的密码" required minlength="6" maxlength="10">
                    </div>
                    <div class="checkpwd">
                        <label for="checkpwd"><i class="star">* </i>确认密码：</label>
                        <input type="password" name="checkpwd" id="checkpwd" placeholder="确认密码" required minlength="6" maxlength="10">
                    </div>
                    <div class="phone">
                        <label for="phone"><i class="star">* </i>手机号码：</label>
                        <input type="tel" name="phone" id="phone" placeholder="请输入手机号" required pattern="^(0|86|17951)?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}|19[0-9]">
                    </div>
                    <div class="email">
                        <label for="email"><i class="star">* </i>电子邮箱：</label>
                        <input type="email" name="email" id="email" required>
                    </div>
                    
                    <div class="sex">
                        <label for="zip">性别：</label>
                        <input type="radio" name="sex" id="sex" value="男">男&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="sex" id="sex" value="女">女
                    </div>
                    <div class="birthday">
                        <label for="add">出生日期：</label>
                        <input type="date" name="birthday" id="birthday" >
                    </div>
                    <div class="submit">
                        <input type="submit" value="注&nbsp&nbsp册">
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" required>
                        <span>我已阅读并接受</span>
                        <a href="#">《用户协议》</a>
                    </div>
                </form>
            </div>
            
        </div>
    	<img src="./img/register01.png" alt="" style="left: 150px;">
        <img src="./img/register02.png" alt="" style="right: 150px;">
    </div>
    <jsp:include page="footer.jsp"/>
    
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
	    $(function() {
	    	$('#username').blur(function(){
		        $.ajax({
					"async":false,//同步操作
					"url":"${pageContext.request.contextPath}/UserServlet?method=checkUsername",
					"type":"POST",
					"data":{"username":$('#username').val()},
					"dataType":"json",
					"success":function(data){
						console.log(data.result);
						if(data.result=="1"){
							
						}else{
							
							alert("用户名已被注册")
							$('#username').val("")
						}
					}
				});
		    })
		    
		    $('#checkpwd').blur(function(){
		    	if($('#checkpwd').val()!=$('#pwd').val()){
		    		alert("两次密码输入不同")
					$('#checkpwd').val("")
		    	}
		    })
			
		})
    </script>
</body>
</html>